<template>
  <main class="page">
    <ModuleTransition>
      <slot v-show="recoShowModule" name="top" />
    </ModuleTransition>

    <div class="page-main">
      <ModuleTransition delay="0.08">
        <div v-show="recoShowModule" class="page-title">
          <h1>{{ $page.title }}</h1>
          <hr />
          <PageInfo
            :pageInfo="$page"
            :showAccessNumber="showAccessNumber"
          ></PageInfo>
        </div>
      </ModuleTransition>

      <ModuleTransition delay="0.16">
        <Content v-show="recoShowModule" class="theme-reco-content" />
      </ModuleTransition>

      <ModuleTransition delay="0.24">
        <footer v-show="recoShowModule" class="page-edit">
          <div class="edit-link" v-if="editLink">
            <a :href="editLink" target="_blank" rel="noopener noreferrer">{{
              editLinkText
            }}</a>
            <OutboundLink />
          </div>

          <div class="last-updated" v-if="lastUpdated">
            <span class="prefix">{{ lastUpdatedText }}: </span>
            <span class="time">{{ lastUpdated }}</span>
          </div>
        </footer>
      </ModuleTransition>

      <ModuleTransition delay="0.32">
        <div class="page-nav" v-if="recoShowModule && (prev || next)">
          <p class="inner">
            <span v-if="prev" class="prev">
              ←
              <router-link v-if="prev" class="prev" :to="prev.path">
                {{ prev.title || prev.path }}
              </router-link>
            </span>

            <span v-if="next" class="next">
              <router-link v-if="next" :to="next.path">
                {{ next.title || next.path }}
              </router-link>
              →
            </span>
          </p>
        </div>
      </ModuleTransition>

      <ModuleTransition delay="0.40">
        <slot v-show="recoShowModule" name="bottom" />
      </ModuleTransition>

      <ModuleTransition delay="0.45">
        <Comments :isShowComments="shouldShowComments" />
      </ModuleTransition>
    </div>
  </main>
</template>

<script>
import PageInfo from "@theme/components/PageInfo";
import { resolvePage, outboundRE, endingSlashRE } from "@theme/helpers/utils";
import ModuleTransition from "@theme/components/ModuleTransition";
import moduleTransitonMixin from "@theme/mixins/moduleTransiton";

export default {
  mixins: [moduleTransitonMixin],
  components: { PageInfo, ModuleTransition },

  props: ["sidebarItems"],

  data() {
    return {
      isHasKey: true,
    };
  },

  computed: {
    // 是否显示评论
    shouldShowComments() {
      const { isShowComments, home } = this.$frontmatter;
      return !(
        this.isComment == false ||
        isShowComments == false ||
        home == true
      );
    },
    showAccessNumber() {
      return this.$themeConfig.commentsSolution === "valine";
    },
    lastUpdated() {
      return this.$page.lastUpdated;
    },
    lastUpdatedText() {
      if (typeof this.$themeLocaleConfig.lastUpdated === "string") {
        return this.$themeLocaleConfig.lastUpdated;
      }
      if (typeof this.$themeConfig.lastUpdated === "string") {
        return this.$themeConfig.lastUpdated;
      }
      return "Last Updated";
    },
    prev() {
      const prev = this.$frontmatter.prev;
      if (prev === false) {
        return;
      } else if (prev) {
        return resolvePage(this.$site.pages, prev, this.$route.path);
      } else {
        return resolvePrev(this.$page, this.sidebarItems);
      }
    },
    next() {
      const next = this.$frontmatter.next;
      if (next === false) {
        return;
      } else if (next) {
        return resolvePage(this.$site.pages, next, this.$route.path);
      } else {
        return resolveNext(this.$page, this.sidebarItems);
      }
    },
    editLink() {
      if (this.$frontmatter.editLink === false) {
        return false;
      }
      const {
        repo,
        editLinks,
        docsDir = "",
        docsBranch = "master",
        docsRepo = repo,
      } = this.$themeConfig;

      if (docsRepo && editLinks && this.$page.relativePath) {
        return this.createEditLink(
          repo,
          docsRepo,
          docsDir,
          docsBranch,
          this.$page.relativePath
        );
      }
      return "";
    },
    editLinkText() {
      return (
        this.$themeLocaleConfig.editLinkText ||
        this.$themeConfig.editLinkText ||
        `Edit this page`
      );
    },
  },

  methods: {
    createEditLink(repo, docsRepo, docsDir, docsBranch, path) {
      const bitbucket = /bitbucket.org/;
      if (bitbucket.test(repo)) {
        const base = outboundRE.test(docsRepo) ? docsRepo : repo;
        return (
          base.replace(endingSlashRE, "") +
          `/src` +
          `/${docsBranch}/` +
          (docsDir ? docsDir.replace(endingSlashRE, "") + "/" : "") +
          path +
          `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
        );
      }

      const base = outboundRE.test(docsRepo)
        ? docsRepo
        : `https://github.com/${docsRepo}`;
      return (
        base.replace(endingSlashRE, "") +
        `/edit` +
        `/${docsBranch}/` +
        (docsDir ? docsDir.replace(endingSlashRE, "") + "/" : "") +
        path
      );
    },
  },
};

function resolvePrev(page, items) {
  return find(page, items, -1);
}

function resolveNext(page, items) {
  return find(page, items, 1);
}

function find(page, items, offset) {
  const res = [];
  flatten(items, res);
  for (let i = 0; i < res.length; i++) {
    const cur = res[i];
    if (cur.type === "page" && cur.path === decodeURIComponent(page.path)) {
      return res[i + offset];
    }
  }
}

function flatten(items, res) {
  for (let i = 0, l = items.length; i < l; i++) {
    if (items[i].type === "group") {
      flatten(items[i].children || [], res);
    } else {
      res.push(items[i]);
    }
  }
}
</script>

<style lang="stylus">
@require '../styles/wrapper.styl';

@keyframes cc {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 600% 0;
  }
}

@keyframes da {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 600%;
  }
}

.page {
  min-height: 100vh;
  position: relative;
  padding-top: 5rem;
  padding-bottom: 2rem;
  display: block;
  box-sizing: border-box;

  >div {
    margin: 0 !important;
  }

  .page-main {
    min-height: 100%;
    max-width: 1100px;
    margin: 0 auto !important;
    >div, footer {
      margin: 0 !important;
      width: 100% !important;
      max-width: 100%;
      box-sizing: border-box !important;
    }
  }

  .page-title {
    padding: 1rem 2.5rem;
    color: var(--text-color);
  }

  .page-edit {
    @extend $wrapper;
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow: auto;

    .edit-link {
      display: inline-block;

      a {
        color: lighten($textColor, 25%);
        margin-right: 0.25rem;
      }
    }

    .last-updated {
      float: right;
      font-size: 0.9em;

      .prefix {
        font-weight: 500;
        color: lighten($textColor, 25%);
      }

      .time {
        font-weight: 400;
        color: #aaa;
      }
    }
  }

  .comments-wrapper {
    padding: 2rem;
  }
}

.page-nav {
  @extend $wrapper;
  padding-top: 1rem;
  padding-bottom: 0;

  .inner {
    min-height: 2rem;
    margin-top: 0;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    overflow: auto; // clear float
  }

  .next {
    float: right;
  }
}

@media (max-width: $MQMobile) {
  .page-title {
    padding: 0 1rem;
  }

  .page-edit {
    .edit-link {
      margin-bottom: 0.5rem;
    }

    .last-updated {
      font-size: 0.8em;
      float: none;
      text-align: left;
    }
  }
}
</style>
